<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="search.name"
            placeholder="企业名称"
            clearable
            @clear="getData()"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="getData()">
          </el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <div class="nopaddingTable">
        <!-- ###去掉多余样式（宽度和下边距），增加表格高度100%样式，保证表格填满区域，同时也会影响到无数据提示的位置 -->
        <el-table :data="tableData" height="100%" row-key="id" stripe>
          <!-- <el-table-column
            label="用户名"
            prop="sysUser.name"
            show-overflow-tooltip
          ></el-table-column> -->
          <el-table-column label="企业属地" prop="block"></el-table-column>
          <!-- <el-table-column
            label="用户人数"
            :prop="sysUser.length"
            show-overflow-tooltip
          ></el-table-column> -->

          <el-table-column
            label="排序"
            prop="orderNum"
            width="60"
          ></el-table-column>
          
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="200"
          >
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="details(scope.row, scope.$index)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="edit(scope.row, scope.$index)"
                >编辑</el-button
              >
              <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                <template #reference>
                  <el-button type="text" size="small" style="color: #f56c6c"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" :image-size="100"></el-empty>
          </template>
        </el-table>
      </div>
      <el-footer>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          background
          layout="total,prev, pager, next, sizes"
          :total="pagination.total"
          v-model:currentPage="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20]"
        >
        </el-pagination>
      </el-footer>
    </el-main>
  </el-container>

  <save-drawer
    ref="saveDrawer"
    v-if="drawer.save"
    @onRefresh="onRefresh"
    @closed="drawer.save = false"
  ></save-drawer>

  <details-drawer
    ref="detailsDrawer"
    v-if="drawer.details"
    @onRefresh="onRefresh"
    @closed="drawer.details = false"
  ></details-drawer>
</template>

<script>
import saveDrawer from "./save";
import detailsDrawer from "./details";

export default {
  name: "commisioner-index",
  components: {
    saveDrawer,
    detailsDrawer,
  },
  data() {
    return {
      tableData: [],
      drawer: {
        save: false,
        details: false,
      },
      search: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      pagination: {
        total: "",
        pageNum: "",
        pageSize: "",
      },
    };
  },

  watch: {},
  mounted() {
    //渲染后执行
    this.getData(); //加载数据
  },
  methods: {
    // 刷新
    onRefresh() {
      this.getData();
    },
    //加载数据
    async getData() {
      let res = await this.$API.commisioner.pageList.get(this.search);
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.pagination = {
          total: res.data.total,
          pageNum: res.data.pageNum,
          pageSize: res.data.pageSize,
        };
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    //添加
    add() {
      this.drawer.save = true;
      this.$nextTick(() => {
        const data = {};
        this.$refs.saveDrawer.open().setData(data);
      });
    },
    //编辑
    edit(data) {
      this.drawer.save = true;
      this.$nextTick(() => {
        this.$refs.saveDrawer.open("edit").edit(data.id);
      });
    },
    //查看
    details(data) {
      this.drawer.details = true;
      this.$nextTick(() => {
        this.$refs.detailsDrawer.open(data.id);
      });
    },
    //删除
    async del(row) {
      let reqData = { id: row.id };
      let res = await this.$API.commisioner.delete.get(reqData);
      if (res.code == 0) {
        this.onRefresh();
        this.$message.success("删除成功");
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    //上传
    async upload() {
      let res = await this.$API.commisioner.upload.post(reqData);
    },
    //分页
    sizeChange(val) {
      this.search.pageSize = val;
      this.getData();
    },
    currentChange(val) {
      this.search.page = val;
      this.getData();
    },
  },
};
</script>

<style scoped>
</style>
